<script lang="ts">
  import { getContext } from 'svelte';
  import type { TabContext } from './conf';

  export let label: string
  export let href: string = "#"

  const { activeTab$, addTab } = getContext<TabContext>('tabs')
  const index = addTab(label, href)
</script>

{#if $activeTab$ === index}
  <div class="tab">
    <slot />
  </div>
{/if}
<style lang="postcss">
  .tab {
    @apply w-full mx-auto overflow-y-scroll grow;
    /* height: calc(var(--tab-height) * 1px); */
    height: var(--tab-height);
  }
</style>
